<template>
    <div class="search" :class="searchBox">
        <template>
            <div class="search-box style1">
                <div class="city-box">
                    <span @click="cityFind">{{$store.state.searchCityName}}</span>
                    <van-icon name="play"/>
                </div>
                <div class="search-input"  @click='fillFind()'>
                    <input type="search" v-model="searchVal"  :placeholder="placeholder||'搜索门票/线路/文创特产'">
                    <button></button>
                </div>
                <!-- <div>-->
                <!--  <span><img src="@/assets/images/icon-classification.png"></span>-->
                <!--</div>-->
            </div>
        </template>

        <van-popup v-model="cityShow" position="bottom">
            <van-area :area-list="areaList" :columns-num="2" title="选择城市" value="110101" @confirm="cityConfirm"/>
        </van-popup>
    </div>
</template>

<script>
    import area from "../../assets/js/area";

    export default {
        name: "HeadSearch",
        props: {
            //根据classic不同，显示不同元素，1：带目的地切换，背景透明，固定在顶部，随页面滚动，2：带目的地切换，背景白色，3：不带目的地切换，背景白色
            classic: {
                type: Number,
                default: 1
            },
            placeholder: String
        },
        data() {
            return {
                searchBox: {bg: false},
                cityShow: false,
                areaList: area,
                searchVal:'',//输入内容
                searchList:[
                    '公园','景点','门票'
                ],//搜索结果类别
                listShow:false,//搜索结果是否显示
            }
        },
        mounted() {
            this.$nextTick(function () {
                window.addEventListener("scroll", this.onScroll);
            });
        },
        methods: {

            cityFind (){//城市搜索
                this.cityShow = true
            },
            //城市确认
            cityConfirm(picker) {
                this.$store.state.searchCityName = picker[1].name
                this.cityShow = false
            },
            fillFind: function () {//手动搜索
                this.$router.push('/search')
            },
            //上下滑动
            onScroll() {
                let scrolled = document.documentElement.scrollTop || document.body.scrollTop;
                let header_height = null || 100;
                if (document.getElementsByClassName("header")[0]) {
                    header_height = document.getElementsByClassName("header")[0].offsetHeight;
                }
                this.searchBox = {searchBox: true, bg: scrolled >= header_height};
            },

        },
    }

</script>
<style lang="scss" scoped>
    @import "@/assets/css/public";

    .search {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        &.bg {
            position: fixed;
            background-color: #fff;
            .search-box.style1 {
                background-color: #fff;
                background-image: none;
                z-index: 100;
                border-bottom: 1px solid #f0f0f0;
                .search-city {
                    displary: none;
                    color: #333;
                    div {
                        border-color: #7a7a7a transparent transparent transparent;
                    }

                    .van-icon {
                        color: #333;
                    }
                }

                .city-box {
                    color: #333;
                }

                .search-input {
                    background-color: #e5e5e5;
    
                    input{
                        color: #333;
                    }
                    input::-webkit-input-placeholder {
                        /* WebKit browsers */
                        color: #666;
                    }

                    input:-moz-placeholder {
                        /* Mozilla Firefox 4 to 18 */
                        color: #666;
                    }

                    input::-moz-placeholder {
                        /* Mozilla Firefox 19+ */
                        color: #666;
                    }

                    input:-ms-input-placeholder {
                        /* Internet Explorer 10+ */
                        color: #666;
                    }
                }

                button {
                    background: url(../../assets/images/icon-search-g.png) no-repeat center transparent;
                    background-size: 50% 50%;
                }
            }
        }
    }

    .search-box {
        display: flex;
        align-items: center;


        .back-box img {
            margin-right: 2vw;
            width: 5vw;
        }

        > div > span {
            img {
                width: vw(42);
                margin-left: vw(30);
            }
        }
    }

    .top-box {
        .search-box {
            .search-input {
                max-width: 92vw;
            }
        }
    }


    .search-box.style1 {

        display: flex;
        width: 100%;
        padding: 2.6vw 3.3vw;
        box-sizing: border-box;
        color: #fff;
        background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 100%);
        background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 100%);
        background-image: -ms-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 100%);
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 100%);

        .search-city {
            color: #fff;
            line-height: 8vw;
            font-size: 4vw;
            display: none;

            div {
                display: inline-block;
                margin: 0 3vw 0 1.3vw;
                width: 0;
                height: 0;
                border-width: 1.3vw;
                border-style: solid;
                border-color: #fff transparent transparent transparent;
            }

            .van-icon {
                color: #fff;
            }
        }

        .search-input {
            display: flex;
            align-items: center;
            flex: 1;
            border-radius: 4vw;
            background-color: rgba(255, 255, 255, 0.4);
            height: 8vw;
            padding: 0 3vw;

            input {
                flex: 1;
                height: 100%;
                font-size: 3.2vw;
                background-color: transparent;
                outline: 0;
                border: 0;
            }

            input::-webkit-input-placeholder {
                /* WebKit browsers */
                color: #fff;
            }

            input:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: #fff;
            }

            input::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                color: #fff;
            }

            input:-ms-input-placeholder {
                /* Internet Explorer 10+ */
                color: #fff;
            }

            button {
                width: 8vw;
                height: 100%;
                background: url(../../assets/images/icon-search-w.png) no-repeat center transparent;
                background-size: 50% 50%;
                border: 0;
                outline: 0;
            }
        }


    }

    .search-box.style3 {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 14vw;
        background-color: #fff;

        div {
            input {
                flex: 1;
                margin-right: 4vw;
                border: 0;
                background-color: transparent;
                height: 100%;
            }

            button {
                border: 0;
                background-color: transparent;

                img {
                    width: 4vw;
                }
            }
        }
    }

    .city-box {
        color: #fff;
        font-size: vw(30);

        i {
            margin-left: vw(10);
            margin-right: vw(30);
            transform: rotate(90deg);
            font-size: vw(24);
        }
    }
</style>
